<template>
  <view class="detail-PCS-item">
    <up-row>
      <up-col span="12">
        <view class="row-detail" style="justify-content: center">
          <image
            class="row-detail-img"
            src="/static/running-icon.png"
            mode=""
          />
          <view class="number">
            <view> {{ dataListSummaryDataMPPT.workStatus }}</view>
          </view>
        </view>
      </up-col>
    </up-row>
    <up-row style="margin-top: 30rpx">
      <up-col span="6">
        <view class="row-detail">
          <image
            class="row-detail-img"
            src="/static/batteryPackVoltage.png"
            mode=""
          />
          <view class="number">
            <view> {{ dataListSummaryDataMPPT.highVoltSideVolt }} V</view>
            <view class="unit">{{ t("equipmentDetail.highSideVoltage") }}</view>
          </view>
        </view>
      </up-col>
      <up-col span="6">
        <view class="row-detail">
          <image
            class="row-detail-img"
            src="/static/batteryPackCurrent.png"
            mode=""
          />
          <view class="number">
            <view>
              {{
                formatCurrent(props.dataListSummaryDataMPPT.highVoltSideCurr)
                  .value
              }}
              {{
                formatCurrent(props.dataListSummaryDataMPPT.highVoltSideCurr)
                  .template
              }}
              <!-- {{ dataListSummaryDataMPPT.highVoltSideCurr }} A -->
            </view>
            <view class="unit">{{ t("equipmentDetail.highSideCurrent") }}</view>
          </view>
        </view>
      </up-col>
    </up-row>
    <up-row style="margin-top: 30rpx">
      <up-col span="6">
        <view class="row-detail">
          <image
            class="row-detail-img"
            src="/static/batteryPackVoltage.png"
            mode=""
          />
          <view class="number">
            <view> {{ dataListSummaryDataMPPT.lowVoltSideVolt }} V</view>
            <view class="unit">{{ t("equipmentDetail.lowSideVoltage") }}</view>
          </view>
        </view>
      </up-col>
      <up-col span="6">
        <view class="row-detail">
          <image
            class="row-detail-img"
            src="/static/batteryPackCurrent.png"
            mode=""
          />
          <view class="number">
            <view>
              {{
                formatCurrent(props.dataListSummaryDataMPPT.lowVoltSideCurr)
                  .value
              }}
              {{
                formatCurrent(props.dataListSummaryDataMPPT.lowVoltSideCurr)
                  .template
              }}

              <!-- {{ dataListSummaryDataMPPT.lowVoltSideCurr }} A -->
            </view>
            <view class="unit">{{ t("equipmentDetail.lowSideCurrent") }}</view>
          </view>
        </view>
      </up-col>
    </up-row>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { formatPower, formatCurrent } from "@/utils/utils";
const props = defineProps({
  moduleType: {
    type: Boolean,
    default: false,
  },
  dataListSummaryDataMPPT: {
    type: Object,
    default: {},
  },
});
</script>

<style scoped lang="scss">
.module-chart {
  margin: 24rpx 0;
}

.detail-PCS-item {
  width: 100%;
  box-sizing: border-box;
  background: #132034;
  border-radius: 32rpx;
  margin-top: 30rpx;
  padding-top: 30rpx;
  padding-bottom: 40rpx;
  .row-detail {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 30rpx;
    box-sizing: border-box;
    .row-detail-img {
      width: 80rpx;
      height: 80rpx;
      margin-right: 24rpx;
    }
    .number {
      font-family: D-DIN;
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
      .unit {
        font-family: Alibaba PuHuiTi 3;
        font-size: 20rpx;
        font-weight: normal;
        margin-top: 20rpx;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #9e9e9e;
      }
    }
  }
}
</style>
